<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>src/ux/Ux.Hoc.js - Zero UI Doc</title>
    <meta name="description" content="Zero UI前端文档工具">
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="stylesheet" href="../assets/css/custom.css">
    <link rel="stylesheet" href="../assets/vendor/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../assets/vendor/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/css/theme.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700" rel="stylesheet" type="text/css">
    <link rel="shortcut icon" type="image/png" href="../assets/img/favicon.png">
    
</head>
<body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a href="../" class="navbar-brand">
            <img src="../assets/img/mdeditor-logo.png" alt="">
            <span>API Docs</span>
          </a>
        </div>

        <div class="collapse navbar-collapse" id="nav">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="https://github.com/silentbalanceyh/vertx-ui.git" class="fa fa-github github"></a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div id="main-wrapper" class="row">
        <div id="content-wrapper">
            <ol class="panel-group" id="sidebar" role="tablist" aria-multiselectable="true">
                <li class="panel panel-default">
                    <div class="panel-heading" role="tab" id="sidebar-search-heading">
                        <h4 class="panel-title">
                      <a role="button" data-toggle="collapse" href="#sidebar-search" aria-expanded="true" aria-controls="collapseOne">
                        Search
                      </a>
                    </h4>
                    </div>
                    <div id="sidebar-search" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="sidebar-search-heading">
                        <div class="panel-body">
                            <div id="api-tabview-filter">
                                <input type="search" id="api-filter" placeholder="Search...">
                            </div>
                        </div>
                    </div>
                </li>
                    <li class="panel panel-default">
                        <div class="panel-heading" role="tab" id="sidebar-version-heading">
                            <h4 class="panel-title">
                                <a role="button" href="https://github.com/silentbalanceyh/vertx-ui.git/commits/0" target="_blank">
                                  Tag: 0.1.0
                                </a>
                            </h4>
                        </div>
                    </li>
                <li class="panel panel-default">
                    <div class="panel-heading" role="tab" id="sidebar-modules-heading">
                        <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" href="#sidebar-modules" aria-expanded="true" aria-controls="collapseOne">
                      Modules
                    </a>
                  </h4>
                    </div>
                    <div id="sidebar-modules" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="sidebar-modules-heading">
                        <div class="panel-body">
                                <ol>
                                        <li>
                                            <a href="../modules/Ux.html">Ux</a>
                                        </li>
                                </ol>
                        </div>
                    </div>
                </li>
            
                <li class="panel panel-default">
                    <div class="panel-heading" role="tab" id="sidebar-classes-heading">
                        <h4 class="panel-title">
                      <a role="button" data-toggle="collapse" href="#sidebar-classes" aria-expanded="true" aria-controls="collapseOne">
                        Classes
                      </a>
                    </h4>
                    </div>
                    <div id="sidebar-classes" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="sidebar-classes-heading">
                        <div class="panel-body">
                            <ol>
                                    <li>
                                        <a href="../classes/Action.html">Action</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Ajax.html">Ajax</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Attribute.html">Attribute</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Column.html">Column</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Debug.html">Debug</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Depend.html">Depend</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Dialog.html">Dialog</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Encrypt.html">Encrypt</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Env.html">Env</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Expr.html">Expr</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Field.html">Field</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Format.html">Format</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Global.html">Global</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Hoc.html">Hoc</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Html.html">Html</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Icon.html">Icon</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Jsx.html">Jsx</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Log.html">Log</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Normalize.html">Normalize</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Op.html">Op</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Option.html">Option</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Param.html">Param</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Prop.html">Prop</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Random.html">Random</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Redux.html">Redux</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Sorter.html">Sorter</a>
                                    </li>
                                    <li>
                                        <a href="../classes/State.html">State</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Store.html">Store</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Type.html">Type</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Validator.html">Validator</a>
                                    </li>
                                    <li>
                                        <a href="../classes/Value.html">Value</a>
                                    </li>
                            </ol>
                        </div>
                    </div>
                </li>
            </ol>
            <div class="content-container">
                <div class="apidocs">
                    <div id="docs-main">
                        <div class="content">
<div class="page-header">
    <h1><i class="fa fa-file-code-o" aria-hidden="true"></i>  File</h1>
</div>

<div class="file">
    <pre class="prettyprint linenums">
import Dg from &#x27;./Ux.Debug&#x27;
import Prop from &#x27;./Ux.Prop&#x27;
import Op from &#x27;./Ux.Op&#x27;

/**
 * 通用属性读取相关信息
 * @method toProp
 * @param props 传入的React属性
 * @param keys 需提取的所有keys属性名集
 */
const toProp = (props = {}, ...keys) =&gt; {
    const inherits = {};
    // Fix Issue
    let targetFor = [];
    if (1 === keys.length &amp;&amp; Array.prototype.isPrototypeOf(keys[0])) {
        targetFor = keys[0];
    } else {
        targetFor = keys;
    }
    targetFor.forEach(key =&gt; {
        const targetKey = &#x60;$${key}&#x60;;
        if (props.hasOwnProperty(targetKey)) {
            inherits[targetKey] = props[targetKey]
        }
    });
    return inherits;
};
/**
 * 读取Tabular和Assist专用属性：&#x60;$t_&#x60;和&#x60;$a_&#x60;开头的属性值。
 * @method toDatum
 * @param props 传入的React属性
 * @param keys 需提取的所有keys属性名集
 */
const toDatum = (props = {}, keys = []) =&gt; {
    const inherits = {};
    if (0 === keys.length) {
        // 读取所有
        for (const key in props) {
            if (key.startsWith(&quot;$t_&quot;) || key.startsWith(&quot;$a_&quot;)) {
                inherits[key] = props[key];
            }
        }
    } else {
        keys.forEach(key =&gt; {
            key = key.replace(/\./g, &#x27;_&#x27;);
            if (props[&#x60;$t_${key}&#x60;]) {
                inherits[&#x60;$t_${key}&#x60;] = props[&#x60;$t_${key}&#x60;];
            } else if (props[&#x60;$a_${key}&#x60;]) {
                inherits[&#x60;$a_${key}&#x60;] = props[&#x60;$a_${key}&#x60;];
            }
        })
    }
    return inherits;
};
/**
 * 读取专用的带有&#x60;$_&#x60;前缀的属性值，主要用于从state状态中读取，Zero中所有的state中的键都是&#x60;$_&#x60;的格式。
 * @method toEffect
 * @param state 传入的React状态
 */
const toEffect = (state = {}) =&gt; {
    const inherits = {};
    for (const key in state) {
        if (key.startsWith(&quot;$_&quot;)) {
            inherits[key] = state[key];
        }
    }
    return inherits
};
/**
 * 读取组件的全称，和Cab.json中的namespace进行配合读取当前组件的全名
 * @method toFullName
 * @param Component 被封装的组件
 * @param {JSON} Cab 链接资源文件
 * @param {String} Name 当前组件的名称（用于日志调试）
 * @return {String}
 */
const toFullName = (Component, Cab = {}, Name) =&gt; {
    // 参数严格检查
    Dg.ensureArgs(Cab, &quot;ns&quot;);
    Dg.ensureNotNull(Name);
    const fullname = Cab.ns + &quot;/&quot; + Name;
    if (Component) Component.displayName = fullname;
    return fullname;
};
/**
 * 从Uri中读取Query Parameter查询参数
 * @method toQueryParameter
 * @param {String} name 待读取的参数名
 * @return {*}
 */
const toQueryParameter = (name = &quot;&quot;) =&gt; {
    const reg = new RegExp(&quot;(^|&amp;)&quot; + name + &quot;=([^&amp;]*)(&amp;|$)&quot;);
    const r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
};
/**
 * PageList组件专用继承方法
 * * fnShow:对话框弹出窗口
 * * fnHide:对话框关闭窗口
 * * fnOut:Redux专用写函数
 * * $dialog:对应Hoc中的_window，对话框参数
 * * $metadata:对应Hoc中的_pagelist, 页面专用元数据
 * * $query:当前页面的查询条件信息
 * @method toPageList
 * @param {ReactComponent} reference React对应组件引用
 * @param {JSX} FormComponent 是否包含传入组件
 * @return {{}}
 */
const toPageList = (reference = {}, FormComponent) =&gt; {
    const inherit = {};
    const {$op, $_show} = reference.state;
    const {fnOut} = reference.props;
    // 三个函数特殊属性
    inherit.fnShow = $op.show(reference);
    inherit.fnHide = $op.hide(reference);
    inherit.fnOut = fnOut;
    // 专用窗口处理
    const dialog = Prop.fromHoc(reference, &quot;window&quot;);
    for (const key in dialog) {
        if (dialog.hasOwnProperty(key)) {
            dialog[key].onCancel = $op.hide(reference);
            dialog[key].visible = $_show;
            Op.connectButton(dialog[key]);
        }
    }
    inherit.$dialog = dialog;
    if (FormComponent) {
        inherit.$component = FormComponent;
    } else {
        inherit.$component = false;
    }
    // 元数据
    inherit.$metadata = Prop.fromHoc(reference, &quot;pagelist&quot;);
    inherit.$query = reference.state.$query;
    inherit.$filters = reference.props.$filters;
    return inherit;
};
/**
 * @class Hoc
 * @description 专用Hoc解释器
 */
export default {
    // PageList
    toPageList,
    toFullName,
    // 继承专用属性
    toProp,
    toDatum,
    toEffect,
    toQueryParameter,
    // 处理专用参数信息
};



    </pre>
</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../assets/vendor/prettify/prettify-min.js"></script>
    <script>prettyPrint();</script>
    <script src="../assets/vendor/jquery/jquery.min.js"></script>
    <script src="../assets/vendor/jquery-ui/jquery-ui.min.js"></script>
    <script src="../assets/vendor/bootstrap/js/bootstrap.js"></script>
    <script src="../assets/vendor/github-slugger/slugger.js"></script>
    <script src="../assets/js/yuidoc-bootstrap.js"></script>
</body>
</html>
